<template>
	<view class="content">
		<view class="topSel">
			<view class="select-box">
				<uni-data-select
					v-model="selStatus"
					:localdata="statusList"
					:clear="false"
					placeholder="选择统计时间"
					label="选择统计时间"
				></uni-data-select>
			</view>
			<view class="select-box">
				<uni-data-select
					v-model="selType"
					:localdata="typeList"
					:clear="false"
					placeholder="选择统计图形式"
					label="选择统计图形式"
				></uni-data-select>
			</view>
		</view>

		<qiun-title-bar :title="statusList[selStatus].text + '商品统计图'" />
		<!-- 只需要在:opts中传入与config-ucharts.js中默认配置不同的属性即可覆盖默认配置，既保证了全局图表样式的统一性，也减少了代码量与包体积 -->
		<view class="charts-box">
			<qiun-data-charts
				:type="selType"
				:chartData="chartsDataColumn1"
				:ontouch="true"
			/>
		</view>

		<qiun-title-bar :title="statusList[selStatus].text + '做饭统计图'" />
		<!-- 只需要在:opts中传入与config-ucharts.js中默认配置不同的属性即可覆盖默认配置，既保证了全局图表样式的统一性，也减少了代码量与包体积 -->
		<view class="charts-box">
			<qiun-data-charts
				:type="selType"
				:chartData="chartsDataColumn2"
				:ontouch="true"
			/>
		</view>
	</view>
</template>

<script setup lang="ts">
import { useListStore } from "@/store/modules/list";
import { useCookingStore } from "@/store/modules/cooking";
import BigNumber from "bignumber.js";
import dayjs from "dayjs";

let selStatus = ref(1);
const statusList = [
	{
		value: 0,
		text: "周"
	},
	{
		value: 1,
		text: "月"
	},
	{
		value: 2,
		text: "年"
	}
];

let selType = ref("column");
const typeList = [
	{
		value: "line",
		text: "折线图"
	},
	{
		value: "column",
		text: "柱状图"
	}
];

const listStore = useListStore();
const cookingStore = useCookingStore();
const itemList = listStore.itemList;
const cookList = cookingStore.selectList;
// let categories = ref<string[]>([])
// let seriesCost = ref<number[]>([])
// const categories = computed(() => {
// 	return Array.from(
// 		new Set(
// 			itemList.value.map((item) => {
// 				return new Date(item.time).getMonth() + 1 + "月";
// 			})
// 		)
// 	);
// });
type chartsDataColumnType = {
	categories: string[];
	series: {
		name: string;
		data: number[];
	}[];
};
let chartsDataColumn1 = ref<chartsDataColumnType | {}>({});
let chartsDataColumn2 = ref<chartsDataColumnType | {}>({});

const filterItemList = () => {
	let categoriesList: string[] = [];
	let seriesIncome: number[] = [];
	let seriesCost: number[] = [];
	let seriesProfit: number[] = [];
	var start: Date, end: Date;

	switch (selStatus.value) {
		case 0:
			start = new Date(
				dayjs().startOf("week").add(1, "day").format("YYYY-MM-DD 00:00:00")
			);
			end = new Date(
				dayjs().endOf("week").add(1, "day").format("YYYY-MM-DD 23:59:59")
			);
			break;
		case 1:
			start = new Date(dayjs().startOf("month").format("YYYY-MM-DD 00:00:00"));
			end = new Date(dayjs().endOf("month").format("YYYY-MM-DD 23:59:59"));
			break;
	}

	itemList.forEach((item) => {
		let time = new Date(item.time);
		if (start == undefined || (time >= start && time <= end)) {
			let day =
				selStatus.value == 2
					? new Date(item.time).getMonth() + 1 + "月"
					: dayjs(time).format("MM月DD日");
			if (categoriesList.indexOf(day) === -1) {
				categoriesList.push(day);
				seriesIncome.push(item.income);
				seriesCost.push(item.cost);
				seriesProfit.push(Number(BigNumber(item.income).minus(item.cost)));
			} else {
				console.log(categoriesList.indexOf(day));
				seriesIncome[categoriesList.indexOf(day)] = Number(
					BigNumber(seriesIncome[categoriesList.indexOf(day)]).plus(item.income)
				);
				seriesCost[categoriesList.indexOf(day)] = Number(
					BigNumber(seriesCost[categoriesList.indexOf(day)]).plus(item.cost)
				);
				seriesProfit[categoriesList.indexOf(day)] = Number(
					new BigNumber(item.income)
						.minus(item.cost)
						.plus(seriesProfit[categoriesList.indexOf(day)])
				);
			}
		}
	});

	let newChartsDataColumn: chartsDataColumnType = {
		categories: [],
		series: []
	};
	console.log(categoriesList, seriesCost, seriesIncome, seriesProfit);
	newChartsDataColumn.categories = categoriesList;

	newChartsDataColumn.series[0] = {
		name: "花费",
		data: seriesCost
	};
	newChartsDataColumn.series[1] = {
		name: "收入",
		data: seriesIncome
	};
	newChartsDataColumn.series[2] = {
		name: "利润",
		data: seriesProfit
	};
	setTimeout(() => {
		chartsDataColumn1.value = JSON.parse(JSON.stringify(newChartsDataColumn));
	}, 1000);
};

const filterCookList = () => {
	let categoriesList: string[] = [];
	let series: number[] = [];
	var start: Date, end: Date;

	switch (selStatus.value) {
		case 0:
			start = new Date(
				dayjs().startOf("week").add(1, "day").format("YYYY-MM-DD 00:00:00")
			);
			end = new Date(
				dayjs().endOf("week").add(1, "day").format("YYYY-MM-DD 23:59:59")
			);
			break;
		case 1:
			start = new Date(dayjs().startOf("month").format("YYYY-MM-DD 00:00:00"));
			end = new Date(dayjs().endOf("month").format("YYYY-MM-DD 23:59:59"));
			break;
	}

	cookList.forEach((item) => {
		let time = new Date(item.date);
		if (start == undefined || (time >= start && time <= end)) {
			let name = item.info;
			if (categoriesList.indexOf(name) === -1) {
				categoriesList.push(name);
				series.push(1);
			} else {
				series[categoriesList.indexOf(name)] = Number(
					BigNumber(series[categoriesList.indexOf(name)]).plus(1)
				);
			}
		}
	});
	// console.log(cookList, categoriesList, series);
	let newChartsDataColumn: chartsDataColumnType = {
		categories: [],
		series: []
	};
	newChartsDataColumn.categories = categoriesList;

	newChartsDataColumn.series[0] = {
		name: "做饭次数",
		data: series
	};
	console.log(newChartsDataColumn);
	setTimeout(() => {
		chartsDataColumn2.value = JSON.parse(JSON.stringify(newChartsDataColumn));
	}, 1000);
};

const filterList = () => {
	filterItemList();
	filterCookList();
};

watchEffect(() => {
	filterList();
});
</script>

<style lang="scss" scoped>
.topSel {
	display: flex;
	justify-content: space-around;
	padding: 20rpx;
	border-bottom: 1px solid #ccc;
	.select-box {
		min-width: 200rpx;
	}
}
.content {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.charts-box {
	width: 100%;
	height: 300px;
}
</style>
